<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>WebRTC 视频通话</title>
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet">
    <link href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.8.1/font/bootstrap-icons.css" rel="stylesheet">
    <link rel="stylesheet" href="css/style.css">
</head>
<body>
    <div class="container-fluid">
        <header class="bg-primary text-white p-3 mb-4">
            <div class="d-flex justify-content-between align-items-center">
                <h1 class="h3 mb-0">
                    <i class="bi bi-camera-video me-2"></i>
                    WebRTC 视频通话系统
                </h1>
                <div class="d-flex align-items-center">
                    <span class="badge bg-light text-dark me-2" id="connectionIndicator">
                        <i class="bi bi-circle-fill text-danger me-1"></i>
                        离线
                    </span>
                    <button class="btn btn-outline-light btn-sm" onclick="webrtcClient.refreshRooms()">
                        <i class="bi bi-arrow-clockwise"></i>
                    </button>
                </div>
            </div>
        </header>

        <div class="row">
            <!-- 左侧控制面板 -->
            <div class="col-md-3">
                <!-- 用户信息卡片 -->
                <div class="card mb-3">
                    <div class="card-header">
                        <h5><i class="bi bi-person-circle me-2"></i>用户信息</h5>
                    </div>
                    <div class="card-body">
                        <div class="mb-3">
                            <label for="userName" class="form-label">用户名</label>
                            <div class="input-group">
                                <span class="input-group-text"><i class="bi bi-person"></i></span>
                                <input type="text" class="form-control" id="userName" placeholder="输入您的姓名" maxlength="50">
                            </div>
                        </div>
                        <button class="btn btn-success w-100" id="joinBtn">
                            <i class="bi bi-box-arrow-in-right me-2"></i>加入系统
                        </button>
                        <div id="userStatus" class="mt-2"></div>
                    </div>
                </div>

                <!-- 房间管理卡片 -->
                <div class="card mb-3">
                    <div class="card-header">
                        <h5><i class="bi bi-house-door me-2"></i>房间管理</h5>
                    </div>
                    <div class="card-body">
                        <div class="mb-3">
                            <label for="roomName" class="form-label">房间名称</label>
                            <div class="input-group">
                                <span class="input-group-text"><i class="bi bi-plus-circle"></i></span>
                                <input type="text" class="form-control" id="roomName" placeholder="输入房间名称" maxlength="100">
                            </div>
                        </div>
                        <div class="mb-3">
                            <label for="maxUsers" class="form-label">最大用户数</label>
                            <select class="form-select" id="maxUsers">
                                <option value="2">2 人</option>
                                <option value="4">4 人</option>
                                <option value="6">6 人</option>
                                <option value="8">8 人</option>
                                <option value="10" selected>10 人</option>
                                <option value="20">20 人</option>
                                <option value="50">50 人</option>
                            </select>
                        </div>
                        <button class="btn btn-primary w-100 mb-2" id="createRoomBtn">
                            <i class="bi bi-plus-circle me-2"></i>创建房间
                        </button>
                        <button class="btn btn-info w-100 mb-2" id="refreshRoomsBtn">
                            <i class="bi bi-arrow-clockwise me-2"></i>刷新房间列表
                        </button>
                        <button class="btn btn-warning w-100" id="leaveRoomBtn" style="display: none;">
                            <i class="bi bi-box-arrow-left me-2"></i>离开房间
                        </button>
                        
                        <div id="roomsList" class="mt-3"></div>
                        <div id="currentRoom" class="mt-2"></div>
                    </div>
                </div>

                <!-- 房间用户卡片 -->
                <div class="card mb-3">
                    <div class="card-header">
                        <h5><i class="bi bi-people me-2"></i>房间用户</h5>
                    </div>
                    <div class="card-body">
                        <div id="roomUsers"></div>
                    </div>
                </div>

                <!-- 设置卡片 -->
                <div class="card">
                    <div class="card-header">
                        <h5><i class="bi bi-gear me-2"></i>设置</h5>
                    </div>
                    <div class="card-body">
                        <div class="form-check form-switch mb-2">
                            <input class="form-check-input" type="checkbox" id="autoAcceptCalls">
                            <label class="form-check-label" for="autoAcceptCalls">
                                自动接听通话
                            </label>
                        </div>
                        <div class="form-check form-switch mb-2">
                            <input class="form-check-input" type="checkbox" id="enableNotifications" checked>
                            <label class="form-check-label" for="enableNotifications">
                                桌面通知
                            </label>
                        </div>
                        <div class="form-check form-switch">
                            <input class="form-check-input" type="checkbox" id="debugMode">
                            <label class="form-check-label" for="debugMode">
                                调试模式
                            </label>
                        </div>
                    </div>
                </div>
            </div>

            <!-- 右侧视频区域 -->
            <div class="col-md-9">
                <div class="row video-grid">
                    <!-- 本地视频 -->
                    <div class="col-md-6">
                        <div class="card">
                            <div class="card-header d-flex justify-content-between align-items-center">
                                <h5><i class="bi bi-camera me-2"></i>本地视频</h5>
                                <div class="btn-group" role="group">
                                    <button class="btn btn-outline-primary btn-sm" id="startVideoBtn">
                                        <i class="bi bi-camera-video"></i> 开启
                                    </button>
                                    <button class="btn btn-outline-danger btn-sm" id="stopVideoBtn" style="display: none;">
                                        <i class="bi bi-camera-video-off"></i> 关闭
                                    </button>
                                    <button class="btn btn-outline-secondary btn-sm" id="muteBtn">
                                        <i class="bi bi-mic"></i> 静音
                                    </button>
                                    <button class="btn btn-outline-info btn-sm" id="switchCameraBtn" style="display: none;">
                                        <i class="bi bi-arrow-repeat"></i>
                                    </button>
                                </div>
                            </div>
                            <div class="card-body position-relative">
                                <video id="localVideo" class="w-100" autoplay muted playsinline style="background: #000; min-height: 300px;"></video>
                                <div class="position-absolute bottom-0 start-0 p-2">
                                    <span class="badge bg-primary">您</span>
                                </div>
                            </div>
                        </div>
                    </div>

                    <!-- 远程视频 -->
                    <div class="col-md-6">
                        <div class="card">
                            <div class="card-header d-flex justify-content-between align-items-center">
                                <h5><i class="bi bi-display me-2"></i>远程视频</h5>
                                <div class="btn-group" role="group">
                                    <button class="btn btn-outline-success btn-sm" id="fullscreenBtn">
                                        <i class="bi bi-fullscreen"></i>
                                    </button>
                                    <button class="btn btn-outline-warning btn-sm" id="screenshotBtn">
                                        <i class="bi bi-camera"></i>
                                    </button>
                                </div>
                            </div>
                            <div class="card-body position-relative">
                                <video id="remoteVideo" class="w-100" autoplay playsinline style="background: #000; min-height: 300px;"></video>
                                <div class="position-absolute bottom-0 start-0 p-2" id="remoteUserInfo" style="display: none;">
                                    <span class="badge bg-success" id="remoteUserName">远程用户</span>
                                </div>
                                <div class="position-absolute top-0 end-0 p-2" id="connectionQualityIndicator" style="display: none;">
                                    <span class="badge bg-success">
                                        <i class="bi bi-wifi"></i> 优秀
                                    </span>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>

                <!-- 通话控制面板 -->
                <div class="row mt-3">
                    <div class="col">
                        <div class="card">
                            <div class="card-header">
                                <h5><i class="bi bi-telephone me-2"></i>通话控制</h5>
                            </div>
                            <div class="card-body text-center">
                                <div class="btn-group" role="group" aria-label="通话控制">
                                    <button class="btn btn-outline-secondary" id="holdCallBtn" disabled>
                                        <i class="bi bi-pause-circle"></i> 保持
                                    </button>
                                    <button class="btn btn-outline-primary" id="shareScreenBtn" disabled>
                                        <i class="bi bi-display"></i> 共享屏幕
                                    </button>
                                    <button class="btn btn-outline-info" id="recordCallBtn" disabled>
                                        <i class="bi bi-record-circle"></i> 录制
                                    </button>
                                    <button class="btn btn-outline-danger" id="endAllCallsBtn" disabled>
                                        <i class="bi bi-telephone-x"></i> 结束所有通话
                                    </button>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>

                <!-- 连接状态和日志 -->
                <div class="row mt-3">
                    <div class="col">
                        <div class="card">
                            <div class="card-header d-flex justify-content-between align-items-center">
                                <h5><i class="bi bi-activity me-2"></i>连接状态</h5>
                                <div class="btn-group btn-group-sm" role="group">
                                    <button class="btn btn-outline-secondary" id="clearLogsBtn">
                                        <i class="bi bi-trash"></i> 清空
                                    </button>
                                    <button class="btn btn-outline-primary" id="exportLogsBtn">
                                        <i class="bi bi-download"></i> 导出
                                    </button>
                                </div>
                            </div>
                            <div class="card-body">
                                <div class="row mb-3">
                                    <div class="col-md-6">
                                        <strong>连接状态:</strong> 
                                        <span id="connectionStatus" class="connection-disconnected">未连接</span>
                                    </div>
                                    <div class="col-md-6">
                                        <strong>当前通话:</strong> 
                                        <span id="activeCallsCount">0</span> 个
                                    </div>
                                </div>
                                <div class="mb-2">
                                    <strong>系统日志:</strong>
                                </div>
                                <div id="logMessages" class="border rounded p-2" style="height: 200px; overflow-y: auto; background: #f8f9fa;"></div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <!-- 来电提醒模态框 -->
    <div class="modal fade" id="incomingCallModal" tabindex="-1" data-bs-backdrop="static">
        <div class="modal-dialog modal-dialog-centered">
            <div class="modal-content">
                <div class="modal-header bg-primary text-white">
                    <h5 class="modal-title">
                        <i class="bi bi-telephone-inbound me-2"></i>
                        来电提醒
                    </h5>
                </div>
                <div class="modal-body text-center">
                    <div class="mb-3">
                        <i class="bi bi-telephone-fill text-primary" style="font-size: 3rem;"></i>
                    </div>
                    <p class="lead" id="incomingCallMessage"></p>
                    <div class="progress mb-3" style="height: 6px;">
                        <div class="progress-bar progress-bar-striped progress-bar-animated" 
                             role="progressbar" style="width: 100%"></div>
                    </div>
                </div>
                <div class="modal-footer justify-content-center">
                    <button type="button" class="btn btn-success btn-lg px-4" id="acceptCallBtn">
                        <i class="bi bi-telephone me-2"></i>接听
                    </button>
                    <button type="button" class="btn btn-danger btn-lg px-4" id="rejectCallBtn">
                        <i class="bi bi-telephone-x me-2"></i>拒绝
                    </button>
                </div>
            </div>
        </div>
    </div>

    <!-- 屏幕共享模态框 -->
    <div class="modal fade" id="screenShareModal" tabindex="-1">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title">
                        <i class="bi bi-display me-2"></i>
                        屏幕共享
                    </h5>
                    <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
                </div>
                <div class="modal-body">
                    <p>选择要共享的内容:</p>
                    <div class="d-grid gap-2">
                        <button class="btn btn-outline-primary" id="shareEntireScreenBtn">
                            <i class="bi bi-display me-2"></i>整个屏幕
                        </button>
                        <button class="btn btn-outline-secondary" id="shareWindowBtn">
                            <i class="bi bi-window me-2"></i>应用程序窗口
                        </button>
                        <button class="btn btn-outline-info" id="shareTabBtn">
                            <i class="bi bi-browser-chrome me-2"></i>浏览器标签页
                        </button>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <!-- 统计信息模态框 -->
    <div class="modal fade" id="statsModal" tabindex="-1">
        <div class="modal-dialog modal-lg">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title">
                        <i class="bi bi-graph-up me-2"></i>
                        连接统计
                    </h5>
                    <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
                </div>
                <div class="modal-body">
                    <div id="connectionStats">
                        <div class="row">
                            <div class="col-md-6">
                                <h6>音频统计</h6>
                                <ul class="list-unstyled">
                                    <li>比特率: <span id="audioBitrate">-</span></li>
                                    <li>丢包率: <span id="audioPacketLoss">-</span></li>
                                    <li>延迟: <span id="audioLatency">-</span></li>
                                </ul>
                            </div>
                            <div class="col-md-6">
                                <h6>视频统计</h6>
                                <ul class="list-unstyled">
                                    <li>比特率: <span id="videoBitrate">-</span></li>
                                    <li>帧率: <span id="videoFrameRate">-</span></li>
                                    <li>分辨率: <span id="videoResolution">-</span></li>
                                </ul>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/microsoft-signalr/6.0.1/signalr.min.js"></script>
    <script src="js/webrtc.js"></script>
</body>
</html> 